import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:speed_random/app_styles.dart';
import 'package:speed_random/common/common_fuc.dart';
import 'package:speed_random/pages/home/rand_com/com_results/view.dart';
import 'package:speed_random/pages/home/rand_com/view_set.dart';
import 'package:speed_random/widgets/row_two_buttons.dart';

import 'logic.dart';
import 'state.dart';


class ViewBodyCom extends StatelessWidget {

  final RandComLogic logic;
  final RandComState state;

  const ViewBodyCom({Key? key, required this.logic, required this.state}) : super(key: key);







  @override
  Widget build(BuildContext context) {

    // 这里是公共部分组建。
    return  Obx(()=>Card(
      color:state.randComArgs.value.colorPagebg,
      // 使用 Obx 响应式组件
      child:
      state.randomNumbers.length<2?
      Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          // 遍历 state.randomNumbers 列表，为每个元素创建一个 Text 组件
          ...state.randomNumbers.map((number) => Text(
            '$number'.tr,
            style: TextStyle(
                fontSize:commonFuc.calculateFontSize(number.toString().tr,context),
                color:state.randComArgs.value.colorPageText,
                fontWeight: FontWeight.bold
            ),
          )).toList()
        ],
      )
          :
      GridView.builder(
        // 限制滚动，避免与 Scaffold 滚动冲突
        shrinkWrap: true,
        // 每行显示 2 列
        gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 2,
          // 水平间距
          crossAxisSpacing: 8.0,
          // 垂直间距
          mainAxisSpacing: 8.0,
        ),
        // 设置列表项数量
        itemCount: state.randomNumbers.length,
        // 构建每个列表项
        itemBuilder: (context, index) {
          final number = state.randomNumbers[index];
          final indexnum = index+1;
          return Center(
            child: Container(
              // 添加边框
              decoration: BoxDecoration(

                border: Border.all(
                  color: state.randComArgs.value.colorPageText,
                  width: 1,
                ),
                borderRadius: BorderRadius.circular(8),
              ),
              padding: const EdgeInsets.all(5),
              margin:  EdgeInsets.only(left: index%2==0?10:0, right: index%2==0?0:10, top: 10, bottom: 0),
              child: Stack(
                children: [
                  Center(
                    child: Text(
                      '$number'.tr,
                      style: TextStyle(
                        fontSize: commonFuc.calculateFontSize(number.toString().tr,context,baseSize: 80),
                        color: state.randComArgs.value.colorPageText,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                  ),
                  // 左上角显示 index 小标
                  Positioned(
                    top: 0,
                    left: 0,
                    child: Container(
                      padding: const EdgeInsets.all(4),
                      /*decoration: BoxDecoration(
                            color: AppStyles.colorAppBarbg,
                            shape: BoxShape.circle,
                          ),*/
                      child: Text(
                        '$indexnum',
                        style: TextStyle(
                          fontSize: 10,
                          color: Colors.black,
                          fontWeight: FontWeight.bold,
                        ),
                      ),
                    ),
                  ),
                ],
              ),
            ),

          );
        },
      ),

    ));
  }



}


